import React from 'react';
import ReactDOM from 'react-dom';
import ReactFullpage from '@fullpage/react-fullpage';
import './index.less';
import fullpage from 'fullpage.js'
// const FullPage = () => {
//   setTimeout(() => {
//     var myFullpage = new fullpage('#fullpage', {
//       // 导航
//       menu: '#menu',
//       lockAnchors: false,
//       anchors:['firstPage', 'secondPage'],
//       navigation: false,
//       navigationPosition: 'right',
//       navigationTooltips: ['firstSlide', 'secondSlide'],
//       showActiveTooltip: false,
//       slidesNavigation: false,
//       slidesNavPosition: 'bottom',
    
//       // 滚动
//       css3: true,
//       scrollingSpeed: 700,
//       autoScrolling: true,
//       fitToSection: true,
//       fitToSectionDelay: 600,
//       scrollBar: false,
//       easing: 'easeInOutCubic',
//       easingcss3: 'ease',
//       loopBottom: false,
//       loopTop: false,
//       loopHorizontal: true,
//       continuousVertical: false,
//       continuousHorizontal: false,
//       scrollHorizontally: false,
//       interlockedSlides: false,
//       dragAndMove: false,
//       offsetSections: false,
//       resetSliders: false,
//       fadingEffect: false,
//       normalScrollElements: '#element1, .element2',
//       scrollOverflow: true,
//       scrollOverflowMacStyle: false,
//       scrollOverflowReset: false,
//       touchSensitivity: 15,
//       bigSectionsDestination: null,
    
//       // 可访问
//       keyboardScrolling: true,
//       animateAnchor: true,
//       recordHistory: true,
    
//       // 布局
//       controlArrows: true,
//       controlArrowsHTML: [
//         '<div class="fp-arrow"></div>', 
//         '<div class="fp-arrow"></div>'
//       ],
//       verticalCentered: true,
//       sectionsColor : ['#ccc', '#fff'],
//       paddingTop: '3em',
//       paddingBottom: '10px',
//       fixedElements: '#header, .footer',
//       responsiveWidth: 0,
//       responsiveHeight: 0,
//       responsiveSlides: false,
//       parallax: false,
//       parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
//       dropEffect: false,
//       dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
//       waterEffect: false,
//       waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
//       cards: false,
//       cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},
    
    
//       // 自定义选择器
//       sectionSelector: '.section',
//       slideSelector: '.slide',
    
//       lazyLoading: true,
//       observer: true,
//       credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},
    
//       // 事件
//       beforeLeave: function(origin, destination, direction, trigger){},
//       onLeave: function(origin, destination, direction, trigger){},
//       afterLoad: function(origin, destination, direction, trigger){},
//       afterRender: function(){},
//       afterResize: function(width, height){},
//       afterReBuild: function(){},
//       afterResponsive: function(isResponsive){},
//       afterSlideLoad: function(section, origin, destination, direction, trigger){},
//       onSlideLeave: function(section, origin, destination, direction, trigger){},
//       onScrollOverflow: function(section, slide, position, direction){}
//     });
//   },100)
//   return (
//     <div id="fullpage">
//       <div className="section">Some section</div>
//       <div className="section">Some section</div>
//       <div className="section">Some section</div>
//       <div className="section">Some section</div>
//     </div>
//   );
// };
const FullPage = () => (
  <ReactFullpage
    //fullpage options
    licenseKey = {'YOUR_KEY_HERE'}
    scrollingSpeed = {1000} /* Options here */
    scrollHorizontally = {true}  /* Because we are using the extension */
    scrollHorizontallyKey = {'YOUR KEY HERE'}

    render={({ state, fullpageApi }) => {
      return (
        <ReactFullpage.Wrapper>
          <div className="section">
            <p>Section 1 (welcome to fullpage.js)</p>
            <button onClick={() => fullpageApi.moveSectionDown()}>
              Click me to move down
            </button>
          </div>
          <div className="section">
            <p>Section 2</p>
          </div>
        </ReactFullpage.Wrapper>
      );
    }}
  />
);
export default FullPage;
